<style>
    body {
        background: #000;
    }
    
    h1 {
        color: aliceblue;
    }
    
    span {
        position: fixed;
        left: 0;
        top: 50px;
        border: 1px solid yellow;
        display: inline-block;
        width: 200px;
        height: 20px;
        background: red;
    }
</style>

<h1>星星选手</h1>


<body>
    <div>
        <span style="display:inline-block;width:200px;height:20px;background: red;"></span>
    </div>
</body>

<script>
    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }
    var num = parseInt(document.querySelector('span').style.width)
    setInterval(function() {
        num = num - 1
        document.querySelector('span').style.width = num
        if (num == 0) {
            alert('游戏结束')
        }
    }, 30)


    setInterval(function() {
        var img = document.createElement('img')
        img.src = './wangge.jpg'
        var w = random(200, 400)
        var h = random(200, 400)
        img.style.width = w + 'px'
        img.style.height = h + 'px'
        var maxWidth = (window.innerWidth || document.documentElement.clientWidth) - w
        var maxHeight = (window.innerHeight || document.documentElement.clientHeight) - h
        img.style.position = 'absolute'
        img.style.left = random(0, maxWidth) + 'px'
        img.style.top = random(0, maxHeight) + 'px'
        document.body.appendChild(img)
    }, 1000)

    document.body.onclick = function(evt) {
        var e = evt || window.event
        if (e.target.nodeName == 'IMG') {
            this.removeChild(e.target)
            num += 50
        }
        if (num >= 300) {
            alert('恭喜你')
        }
    }
</script>